﻿@* Razor 禁用智能感知 *@ 
<!--Monaco编辑器 Vue组件定义 -->
<!--X-Template 组件模板-->
<!--树形下拉选择器-->
<script type="text/x-template" id="code-mirror-template">
    <div class="code-editor" style="line-height:1.2em;height:600px;">
       <textarea ref="textarea" ></textarea>
    </div>
</script>
<script>
    var CodeComponent= {
          props: {
                value:{
                    type:String,
                    default:''
                },
                mode:{
                    type:String,
                    default:'text/x-csharp'
                },
          },
          template:'#code-mirror-template',
          data:function() {
            return {
              editor:null
            }
          },
          watch:{
                // 监听外部值变化，更新编辑器内容
                value:function(newVal) {
                  var cvm =this;
                  if (newVal !== cvm.editor.getValue()) {
                    cvm.editor.setValue(newVal);
                  }
                },
                // 监听语言模式变化，更新编辑器
                mode:function(newMode) {
                  var cvm =this;
                  cvm.editor.setOption('mode', newMode);
                }
          },
          methods: {
             
          },
          mounted(){
                var cvm =this;
                // 初始化 CodeMirror
                cvm.editor = CodeMirror.fromTextArea(this.$refs.textarea, {
                  mode: cvm.mode,
                  lineNumbers: true,
                  readOnly: false,
                  theme: 'default',
                  lineWrapping: true,
                  indentUnit: 4,
                  smartIndent: true,
                  matchBrackets: true,
                  autoCloseTags: true,
                  lineHeight: '1.2em'
                });

                // 设置初始值
                cvm.editor.setValue(cvm.value || '');

                // 获取 CodeMirror 生成的容器
                const cmWrapper = cvm.editor.getWrapperElement();

                // 设置容器高度（可以使用 prop 或固定值）
                cmWrapper.style.height = '630px'; // 直接设置高度

                // 强制刷新编辑器尺寸
                cvm.$nextTick(() => {
                  if (cvm.editor) {
                    cvm.editor.refresh();
                  }
                });

                // 监听内容变化，触发 v-model 更新
                cvm.editor.on('change', () => {
                  cvm.$emit('input', cvm.editor.getValue());
                });
          },
          beforeDestroy(){ // 实例卸载
              var cvm =this;
                // 销毁时释放资源
                if (cvm.editor) {
                  cvm.editor.toTextArea();
                }
          }
     };
</script>
<style>
   
</style>